<template>
  <div>
    <div class="mb-16px">
      <el-input
          v-model="keyword"
          placeholder="请输入关键字"
          class="w-300px mr-10px"
      ></el-input>
      <el-button type="primary" @click="resetPage">查询</el-button>
    </div>
    <div class="w-full flex flex-wrap" v-loading="loading">
      <Card
          v-for="item in list"
          :key="item.id"
          :data="item"
          @refresh="getList"
      />
      <el-pagination
          v-show="list.length"
          class="w-full justify-center"
          :total="total"
          layout="total, sizes, prev, pager, next"
          v-model:current-page="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="[15, 30, 60, 120]"
      ></el-pagination>
      <Empty v-if="!list.length" />
    </div>
  </div>
</template>

<script setup>
import Card from "./AppCard.vue";
import { usePage, useLoading } from "@/hooks";
import { useUserStore } from "@/store";

const props = defineProps({
  isCompany: {
    type: Boolean,
    default: false,
  },
});

const keyword = ref("");
const list = ref([]);
const { page, total, resetPage } = usePage(15);
const { loading, setLoading } = useLoading();
const userStore = useUserStore();

const $api = inject("$api");
const getList = async () => {
  setLoading(true);
  const params = {
    ...page.value,
    keyword: keyword.value,
  };
  if (props.isCompany) {
    params.companyId = userStore.userInfo?.companyId;
  } else {
    params.createUserId = userStore.userInfo?.userId;
  }
  try {
    const { data: rows, total: resTotal } =
        await $api.userCenter.getApplicationList(params);
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => page.value,
    () => {
      getList();
    },
    {
      deep: true,
    }
);

onMounted(() => {
  getList();
});
</script>
